<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div><span>按钮输入框和输出框</span></div>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe repudiandae, nisi corporis perspiciatis ad unde omnis, dicta veritatis enim laboriosam, itaque porro. Quisquam fugit quas magni corporis temporibus nihil iure.</p>
		<div style="width: 100px; height: 100px; background: #000;"></div>
		<span>文本</span>
		<br />
		<input type="button" value="按钮2"/>
		<input type="text" />
		<script>
			/*   javaScript:基础语法+*DOM（页面）+BOM（浏览器）
			     JQuery操作DOM方式【7方式，36个函数】--改变页面效果
				 1.元素内容操作：操作元素和元素内容的方式【3个函数】
				 .html()
				 .val()
				 .text()
				 2.元素属性操作：操作元素的属性【固定属性、附加属性】【4个函数】
				 .attr()
				 .removeAttr()
				 .prop() 
				 .removeprop() 
				 3.元素类名操作：【4个函数】
				 .addClass()
				 .removeClass()
				 .toggleClass()
				 .hasClass()
				 4.元素样式【位置】操作:【5个函数】
				 css()
				 width()和height()
				 outerWidth()和outerHeight()
				 5.元素删除和插入操作：【7个函数】
				 append()和prepend()
				 ofter()和before()
				 remove()和empty()
				 replaceWith()
				 6.元素遍历操作：【6个函数】
				 children()和parent()
				 siblings()
				 next()和prev()
				 each()
				 7.动画操作：【7个函数】
				 show()和hide()
				 slideDown()和slideUp()
				 hover()
				 
				 大作业：tab选项卡
				 BOM 浏览器对象模型：学习7个对象的方法使用！
				 吸顶灯效果
			 */
			
			
			
			/* 按钮和输入框  点击按钮，输入框输出文字效果 */
			$("input[type='button']").click(function(){
				// alert("测试");
				$("input[type='text']").val("文本框输出效果");
			});
			
			/* 100*100框，div 鼠标移动上去，文本改成 超文本 */
			$('div').mouseenter(function(){
							$('span').html("超文本");
						});
			
			/* JQuery操作DOM，通过点击一个元素绑定一个事件给另外一个元素改变效果
			 .html()函数   增加一个元素，覆盖原来的html
			 .val函数      input元素使用，改变修改表单元素中文本
			 */
			$('button').click(function(){
				// DOM操作---改变页面其他元素
				// DOM操作--改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯......</marquee>");
			});
			
			
		</script>
	</body>
</html>